<template>
  <div class="user-container">
    <!-- 用户信息区域 -->
    <div class="header">
      <img class="avatar" :src="fullAvatar" @click="$refs.fileInput.click()" />

      <div class="upload" v-show="false">
        <input type="file" accept="image/*" ref="fileInput" @change="changeAvatar" />
      </div>

      <div class="username" v-if="$store.state.userInfo.username">用户名: {{ $store.state.userInfo.username }}</div>
      <van-button round type="danger" v-else @click="$router.push('/login')">立即登录</van-button>

      <div class="setting" @click="$router.push('/setting')" v-if="$store.state.userInfo.username">
        <div class="icon">
          <van-icon name="setting-o" size="20" />
        </div>
        <div class="text">设置</div>
      </div>
    </div>

    <!-- 用户tabs -->
    <ul class="tabs">
      <li @click="$router.push('/order')">
        <div class="icon">
          <van-icon name="orders-o" size="30" />
        </div>
        <div class="text">我的订单</div>
      </li>
      <li @click="$router.push('/addresslist')">
        <div class="icon">
          <van-icon name="guide-o" size="30" />
        </div>
        <div class="text">地址管理</div>
      </li>
      <li @click="$router.push('/history')">
        <div class="icon">
          <van-icon name="like-o" size="30" />
        </div>
        <div class="text">我的足迹</div>
      </li>
    </ul>

    <!-- 推荐商品 -->
    <div class="divider">
      <van-divider>为你推荐</van-divider>
    </div>

    <div class="goodslist">
      <Goods
        @click="$router.push('/goodsDetail/' + item.id)"
        v-for="item in recommendGoods"
        :key="item.id"
        :goods="item"
      />
    </div>
  </div>
</template>

<script>
import { reqRecommendGoods } from '@/api'
import { reqUploadAvatar } from '@/api/user'
import Goods from '@/components/Goods'
// eslint-disable-next-line no-undef
const SERVER_URL = process.env.VUE_APP_SERVER_URL
// eslint-disable-next-line no-undef
let default_avatar = require('@/assets/images/default_avatar.png')
export default {
  data() {
    return {
      recommendGoods: [],
    }
  },
  computed: {
    fullAvatar() {
      // 有头像，则将头像拼接完整路径
      if (this.$store.state.userInfo.avatar) {
        return SERVER_URL + '/' + this.$store.state.userInfo.avatar
      } else {
        // 没有头像，展示默认头像
        return default_avatar
      }
    },
  },
  methods: {
    async changeAvatar(e) {
      let file = e.target.files[0]
      if (!file) {
        return
      }

      // 上传文件
      let formData = new FormData()
      formData.set('avatar', file)
      let { src, status } = await reqUploadAvatar(formData)
      if (status === 0) {
        // 更改vuex中的用户头像
        this.$store.commit('setAvatar', src)
      }
    },
    async getRecommendGoods() {
      let { message } = await reqRecommendGoods()
      this.recommendGoods = message
    },
  },
  mounted() {
    this.getRecommendGoods()
  },
  components: {
    Goods,
  },
}
</script>

<style lang="scss" scoped>
.user-container {
  .header {
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88px;
    padding: 10px;
    background-image: linear-gradient(to right, #c7bca1, #d5d5b7);

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    .username {
      margin-right: 60px;
      font-size: 18px;
    }

    .setting {
      align-self: self-start;
      text-align: center;

      .text {
        font-size: 14px;
      }
    }
  }

  .tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 16px 6px;
    margin: 10px auto;
    background-color: #fff;
    border-radius: 8px;

    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 14px;
      color: #323233;
      list-style: none;

      .icon {
        display: flex;
        justify-content: center;
      }
    }
  }

  .divider {
    .van-divider {
      padding: 0 8px;
      margin: 8px 0;
      font-size: 16px;
      color: #6a6363;
      text-align: center;
      border-color: #c3c5c8;
    }
  }

  .goodslist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2px;
    background-color: #edebeb;
  }
}
</style>
